<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CSS3精美小图标菜单导航DEMO演示</title>
  <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>

<body>
<h1 class="title">CSS3精美小图标菜单导航DEMO演示</h1>
  <div class="container">
  <ul class="navigation">
    <li>
        <a href="#" class="to top">
          <i class="fa fa-home"></i>
          <span>Home</span>
        </a>
    </li>
    <li>
        <a href="#" class="to bottom">
          <i class="fa fa-qrcode"></i>
          <span>About</span>
        </a>
    </li>
    <li>
        <a href="#" class="to right">
          <i class="fa fa-flash"></i>
          <span>Work</span>
        </a>
    </li>
    <li>
        <a href="#" class="to left">
          <i class="fa fa-pencil"></i>
          <span>Journal</span>
        </a>
    </li>
    <li>
        <a href="#">
          <i class="fa fa-heart"></i>
          <span>Contact</span>
        </a>
    </li>
  </ul>
</div>
<div style="text-align:center;clear:both;">
</div>
</body>

</html>